<#--
	collection: initial data
	id, 
	name : 
	
	Extra variable for internal component:
	_gridModel: different phase for generating the tag (_gridModel: 1 header, 2 the hidden template, 3 body, 9 populate column information)
	_namePrefix: datagrid name
	_gridItem: value for generating the tag
-->
<#macro datagrid name='' namePrefix='' collection=[] required=false sortable=false autoStatNumber=false stats=[] showAddCarBtn=false clazz='' style='' model='' width=0 label='' id=''>
	<#local cid = tag.getCid(name, 'datagrid')>
	<#assign _namePrefix = tag.pushNamePrefix(action, namePrefix)>
	
	<#-- push ps -->
	<#local shortName = tag.getShortName(name)>
	<#local _ps = ps>
	<#assign ps = ps.checkAddElement(shortName, name, 'datagrid', {'model':model})>
	
	<#assign _gridModel=9>
	<@span name="_removeButton" width=25/>
	<#nested>
	
	<#local minWidth = tag.getTableWidth(ps)>
	<#if minWidth gt width>
		<#assign pwidth=minWidth>
	<#else>
		<#assign pwidth=width>
	</#if>
	<#if ps.length?? && ps.length gt minWidth>
		<#assign pwidth=ps.length>
	</#if>
	
	<div class="jdatagrid stdEle stdCtn" name="${shortName}" fullName="${name}" uiType="datagrid">
	<#if label != ''>
	<div class="jdatagrid-label"><li>${label}</li><span><span></div>
	</#if>
	<table id="${id}" class="tablelist ${clazz} ${cid}"<#if pwidth gt 0 || style!=''> style="${style}"</#if> namePrefix="${_namePrefix}"<#if required> required="true"</#if>>
	<thead>
		<tr>
			<#assign _gridModel=11>
			<@span name="_removeButton" clazz="fixedEle" width=15 required=required><#if showAddCarBtn><span onclick="showCarItem(this)" class="shoppingCar">Add</span></#if></@span>
			<#assign _gridModel=1>
			<#nested>
		</tr>
	</thead>
	<tbody>
		<#assign _gridModel=2>
		<tr class="templateRow">
			<@span name="_removeButton" clazz="removeColumn"><em></em><a href="javascript:void(0)" class="removeLink" onclick="removeRow(this)">X</a></@span>
			<#nested>
		</tr>
		
		<#assign _gridModel=3>
		<#if collection?size == 0>
			<#local collection=fn.val(action, _namePrefix)![]>
		</#if>
		<#if collection?is_collection || collection?is_sequence>
		<#list collection as item>
			<#assign _gridItem=item>
			<tr>
				<@span name="_removeButton" clazz="removeColumn">
					<em></em><a href="javascript:void(0)" class="removeLink" onclick="removeRow(this)">X</a>
				</@span>
				<@hidden name="id" value=fn.val(item, "id")!/>
				<#nested>
			</tr>
		</#list>
		</#if>
	</tbody>
	<#local stats = tag.getStatProperties(action, ps, stats, autoStatNumber)>
	<#local showStat = stats?size gt 0>
	<#if showStat>
		<tfoot><tr>
			${tag.formatTableStat(action, ps, collection, stats)}
		</tr></tfoot>
	</#if>
	</table>
	</div>
	<@script name=cid _inner=true>
	when('initTableGridEvent', function(){
		initTableGridEvent(j171('.${cid}'),${required?string},${sortable?string},${fn.json(stats)});
	});
	</@script>
	<#assign _gridModel=0>
	<#-- popup ps -->
	<#assign ps = _ps>
	
	<#assign _namePrefix = tag.popNamePrefix(action, namePrefix)>
	
	<@inject name='container.pageinfo' point='header' type='html' once=true>
		<@script src="/static/espirit/scripts/colResizable-1.3.js"/>
		<@script src="/static/espirit/scripts/jquery.fixedheadertable.js"/>
	</@inject>
</#macro>